<template>
  <div>
    <div v-if="isShowAnnouncement">
      <h2>公告</h2>
    </div>
  </div>
</template>

<script setup>
  import { onBeforeUnmount, onUnmounted, reactive, ref } from 'vue'
  import { Announcement as AnnouncementSDK } from '@polyv/interactions-receive-sdk';
  //import Announcement from '@polyv/interactions-receive-sdk-ui-default/lib/PcAnnouncement/index';

  const isShowAnnouncement = ref(false); // 是否显示公告
  const $data = reactive({
    announcementSdk: null,// 公告SDK实例
  })

  $data.announcementSdk = new AnnouncementSDK();

  $data.announcementSdk.on($data.announcementSdk.events.BULLETIN, function(msg) {
    console.log('接收到公告');
    console.log(msg);
  });
  $data.announcementSdk.on($data.announcementSdk.events.REMOVE_BULLETIN, function(msg) {
    console.log('公告已关闭：');
    console.log(msg);
  });
  onBeforeUnmount(() => {
    if($data.announcementSdk){
      $data.announcementSdk.destroy();
    }
  })
</script>

